<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>学习反馈</title>
</head>
<body>
  <div class="container">
    <h4 class="stu-title">学习反馈</h4>
    <img class="bg" src="./img/head.png" alt="">
    <div class="item-wrap">
      <div class="hot-area">
        <span class="hot">热门校区</span>
        <ul class="nav">
          <li><a target="_blank" href="http://bjcp.itheima.com/">北京</a> </li>
          <li><a target="_blank" href="http://sh.itheima.com/">上海</a> </li>
          <li><a target="_blank" href="http://gz.itheima.com/">广州</a> </li>
          <li><a target="_blank" href="http://sz.itheima.com/">深圳</a> </li>
        </ul>
      </div>
      <form class="info-form">
        <div class="area-box">
          <span class="title">地区选择</span>
          <select name="province" class="province">
            <option value="">省份</option>
          </select>
          <select name="city" class="city">
            <option value="">城市</option>
          </select>
          <select name="area" class="area">
            <option value="">地区</option>
          </select>
        </div>
        <div class="area-box">
          <span class="title">您的称呼</span>
          <input type="text" name="nickname" class="nickname"  value="播仔">
        </div>
        <div class="area-box">
          <span class="title">宝贵建议</span>
          <textarea type="text" name="feedback" class="feedback" placeholder="您对AJAX阶段课程宝贵的建议"></textarea>
        </div>
        <div class="area-box">
          <button type="button" class="btn btn-secondary submit">
            确定提交
          </button>
        </div>
      </form>
    </div>
  </div>
  <script src="../js/axios.min.js"></script>
  <script src="./js/form-serialize.js"></script>
  <!-- 核心代码 -->
  <script src="./js/index.js"></script>
  </body>
<script>
 async function getData(){
    const res1=await axios({url:'http://hmajax.itheima.net/api/province'})
    // console.log(res1);
    const optionStr=res1.data.list.map(item=>`<option value="${item}">${item}<option>`).join('')
    document.querySelector('.province').innerHTML+=optionStr
    const res2=await axios({url:'http://hmajax.itheima.net/api/city'})
    // console.log(res2);
    const optionStr1=res2.data.list.map(item=>`<option value="${item}">${item}<option>`).join('')
    document.querySelector('.city').innerHTML='<option value="城市">城市<option>'+optionStr1
    const res3=await axios({url:'http://hmajax.itheima.net/api/area'})
    // console.log(res1);
    const optionStr2=res3.data.list.map(item=>`<option value="${item}">${item}<option>`).join('')
    document.querySelector('.area').innerHTML='<option value="地区">地区<option>'+optionStr2
  }
  getData()
  // 点击省份下拉框，修改城市
  document.querySelector('.province').addEventListener('change',async function(){
    if(this.value===''){
      return alert('请选择省份')
    }
    // 按照用户选择的省份请求城市信息
    const res2=await axios({url:'http://hmajax.itheima.net/api/city',params:{pname:this.value}})
    // console.log(res2);
    const optionStr1=res2.data.list.map(item=>`<option value="${item}">${item}<option>`).join('')
    document.querySelector('.city').innerHTML='<option value="城市">城市<option>'+optionStr1
  })
  // 点击城市下拉框，修改区域
  document.querySelector('.city').addEventListener('change',async function(){
    if(this.value==='城市'){
      return alert('请选择城市')
    }
    // 按照当前的省份和城市来查找区域
      const res3=await axios({url:'http://hmajax.itheima.net/api/area',params:{pname:document.querySelector('.province').value,cname:this.value}})
       const optionStr2=res3.data.list.map(item=>`<option value="${item}">${item}<option>`).join('')
    document.querySelector('.area').innerHTML='<option value="地区">地区<option>'+optionStr2
  })
  // 当点击提交按钮的时候，收集表单数据，并发送请求完成反馈的提交
  document.querySelector('.submit').addEventListener('click',function(){
    const form=document.querySelector('.info-form')
    const data=serialize(form,{hash:true,empty:true})
    console.log(data);
    // 发送请求完成反馈的提交
    axios({
      url:'http://hmajax.itheima.net/api/feedback',
      method:'post',
      data
    }).then(res=>{
      console.log(res);
      alert('提交完成')
    })
  })
</script>
</html>